/* 页眉图片 */
.header img{
    display: block;
    margin: 0 auto;
}
.nav-header {
    width: 102rem;
    height: 3rem;
    background: #3b81c1;
    box-shadow: 0 1px 2px #666;
    margin: 0 auto;
}

/* 导航列表 */
.nav-header-list {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中显示 */
    height: 3rem; /* 与nav高度一致 */
}

/* 单个导航链接 */
.drop-down {
    width: 11rem;
    line-height: 3rem;
    text-align: center;
    position: relative; /* 使用相对定位 */
    font-size: 1.5rem;
}
.drop-down a{
    color: #fff;
    display: block;
}
.drop-down a:hover{
    color: yellow;
}

/* 主容器样式 */
.box-main {
    display: flex; /* 使用弹性布局 */
    width: 100rem; /* 根据需要设置宽度 */
    height: auto; /* 高度自适应 */
    justify-content: space-between; /* 子元素之间的间距 */
    align-items: flex-start; /* 垂直顶部对齐 */
    margin: 1rem auto; /* 居中 */;
    background-color: #fff;
}

/* 侧边栏样式 */
.box-aside {
    width: 20%; /* 侧边栏宽度 */
    height: 21rem; /* 高度自适应 */
    border: 1px solid #ccc; /* 边框 */
    margin-right: 1rem; /* 与主内容区域之间的间距 */
    background-color: #f6fbf5;
}

.box-aside h3 {
    font-size: 1.5rem; /* 标题字体大小 */
    border-bottom: 1px solid #ccc; /* 标题下边框 */
    padding: 1rem;
    font-weight: 700;
    background-color: #dbf3fb;
}

.aside-list a {
    color: #333; /* 字体颜色 */
    display: block; /* 使链接填充整个列表项 */
    text-align: center;
    padding: 0.5rem; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    margin: 1rem;
    padding: 1rem;
    font-size: 1.5rem; /* 字体大小 */

}

.aside-list a:hover {
    background-color: #e5f4fd; /* 鼠标悬停时的背景色 */
}

/* 主内容区域样式 */
.box-list {
    width: 80%; /* 主内容区域宽度 */
}

.nav-place {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 1rem; /* 与列表项之间的间距 */
    background-color: #cce8f9;
    border-bottom: 1px solid #ccc;
    padding: 1rem 0rem;
}

.nav-place span {
    font-size: 1.5rem; /* 标题字体大小 */
    margin-right: 0.5rem; /* 与链接之间的间距 */
    padding-left: 1rem; /* 左内边距 */
}

.nav-place a {
    font-size: 1.5rem; /* 标题字体大小 */
}

.list-item li {
    display: flex; /* 使用弹性布局 */
    justify-content: flex-start; /* 子元素之间的间距 */
    align-items: center; /* 垂直居中对齐 */
    padding: 0.5rem 1rem; /* 上下内边距 */
    border-bottom: 1px dotted #ccc; /* 列表项之间的分隔线 */
    font-size: 1.5rem; /* 列表项字体大小 */
}
.list-item li:before {
    content: '';
    display: inline-block;
    width: 0.3rem; /* 正方形的宽度 */
    height: 0.3rem; /* 正方形的高度 */
    background-color: #333; /* 正方形的背景颜色 */
    margin-right: 0.5rem; /* 正方形和文本之间的间距 */
    vertical-align: middle; /* 垂直居中对齐 */
}
/* 将span内的元素向右靠齐 */
.list-item li>span {
    margin-left: auto; /* 将span推向右边界 */
    font-size: 1.5rem; /* 日期字体大小 */
}
.box-page{
    width: 100rem;
    height: 15rem;
    margin: 1rem auto;
    text-align: center;
    line-height: 26rem;
    font-size: 1.5rem;
    background-color: #ffffff;
}
.block{
    background-color: #1298e0;
    width: 102rem;
    height: 3rem;
    margin: 0 auto;
}
main a:hover{
    color: red;
}
/* 页脚样式 */
.footer {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 2rem;
    position: relative;
    bottom: 0;
    width: 100%;
}